<!DOCTYPE html>
<html>

<head>

     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
     <title>MarkerWithLabel</title>
     
     <!-- Style - Label -->
     <style type="text/css">
       .labels {
         color: #333;
         background-color: white;
         font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
         font-size: 15px;
         font-weight: bold;
         text-align: center;
         width: 200px;
         border: 1px solid #999;
         z-index:1000;
       }
     </style>
     
     <!-- Google Maps API -->
     <script type="text/javascript" 
	 	src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
     </script> 
     
     <!-- MarkerWithLabel -->
     <script type="text/javascript" 
	 		 src="markerwithlabel.js">
     </script>
     
     <script type="text/javascript">
       
	   // Karte initialisieren
	   function initMap() {
         
		 var latLng = new google.maps.LatLng(49.47805, -123.84716);
         var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
    
		 // Karte initialisieren
         var map = new google.maps.Map(document.getElementById('map_canvas'), {
           zoom: 12,
           center: latLng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
    
		 // MarkerWithLabel setzen
         var marker = new MarkerWithLabel({
            position: homeLatLng,
            draggable: false,
            raiseOnDrag: false,
            map: map,
            labelContent: "Ihr Tipp ist 422km vom Ziel entfernt", // Content Label
            labelAnchor: new google.maps.Point(100, 0), // Ankerpunkt Label
            labelClass: "labels" // CSS Klasse Label
         });
    
       }
       
     </script>
     
</head>

<body onload="initMap()">

	 <!-- Kartenansicht -->
     <div id="map_canvas" style="height: 400px; width: 100%;">
     
     </div>

</body>
</html>